{% extends "base_simple.html" %}
{% load cmdb_extras %}

{% block content %}
<!--<link rel="stylesheet" type="text/css" href="/media/css/forms.css" /> -->
<link rel="stylesheet" type="text/css" href="/media/css/forms.css" /> 
<style>
*{margin:0;padding:0;}
img{border:0;}
li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
body{background:#ffffff;font-size:12px;font-family:Verdana, Geneva, sans-serif;}
.choosed {background:#FFBF00}
.warp{position:relative;width:960px;margin:0 auto;}
.list{width:670px;}
.entry{float:left;width:202px;position:relative;margin:10px;_display:inline;}
.entry a{display:block;text-decoration:none;border:1px #000000 solid;}
.entry a:hover{border:1px #999 solid;}
.entry .url{position:absolute;left:1px;bottom:1px;height:28px;width:200px;background:#000;text-align:center;
			filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;}
.entry .url span{display:block;border:0;color:#fff;margin-top:6px;padding:2px;font-weight:bold;}

.detail{position:absolute;right:45px;top:10px;width:216px;padding:10px;background:#393939;border:1px #555 solid;color:#fff;}
.detail li{margin-bottom:4px;}
.detail li.mt10{margin-bottom:10px;}
#url, #company , #description{color:#999;}
.detail a{color:#999;}
.detail a:hover{color:#fff;}

#content h1{color:#ccc;font-size:20px;text-align:center;padding:70px 0;}
/* www.codefans.net */
#pager{clear:both;color:Black;}
#pager a{color:Black;}
#total{float:left;color:Black;}
#pagelist{float:right; color:Black}
.f90{color:Black;}
.dialog-overlay {BACKGROUND: #E0E0E0; FILTER: alpha(opacity:50); opacity: 0.5}
</style>
	
<fieldset class="module aligned ">
	<div class="form-row title"> 
		<div>
		Page Size:<select id='userPageSize'>
				<option value='10000' {%if pageSize == 10000%}selected='selected'{%endif%}>All</option>
				<option value='20' {%if pageSize == 20%}selected='selected'{%endif%}>20</option>
				<option value='50' {%if pageSize == 50%}selected='selected'{%endif%}>50</option>
				<option value='100' {%if pageSize == 100%}selected='selected'{%endif%}>100</option>
				<option value='200' {%if pageSize == 200%}selected='selected'{%endif%}>200</option>
				</select>
			Service name: 
			<select name="serviceType" id="serviceType" >
				<option value="index">All</option>
				{% for s in services_name %}
				<option value="{{ s.0 }}">{{ s.1 }}</option>
				{% endfor %}
			</select>
			Search: <input type="text" name="Search" id="Search" value="" >
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
			<input type="button" value = "Download Deployment" id="download" name="download"/><br/>
		</div>
	</div>
<div id="download_div" style="display:none;width:900px">
	<form action="/cmdb/deployment/" method="GET">
		{% for p in projects %}
			<h><input type='checkbox' class='usercheck' name = 'ps' value ='{{p}}' />{{p}}</h>&nbsp;
			{% endfor %}
			<h><input type='checkbox' id='chkAll' value = "checkall"  onclick='select_all()'/>All</h></h><br>
			<input type="submit" value="Download"  />
			<input type="submit" name="update_cache" value="Download And Update Cache"  />
	</form>
</div>

</fieldset>
<div class="list">
	<div id="content"></div>
	<div id="pager">
        	<div id="total"></div>
            	<div id="pagelist"></div>
        </div>
</div>
<div id="__result"></div>
<div id="dialog-overlay" class="dialog-overlay" style="left: 0px; top: 0px; width: 100%; height: 100%; z-index: 505; position: absolute; display: none; opacity: 0.5;">
	<div id="loading" style="margin-left:40%;margin-top:20%;text-align:center;padding-top:20px;position:absolute;">
		<img src="/media/img/loading.gif"/>
	</div>
</div>
<div id="showDetail" style="display:none;position:fixed;margin:auto;bottom:0;width:100%;background:#E0F8E6;"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.init.js"></script> 
<script type="text/javascript" src="/media/js/actions.min.js"></script>
<script type="text/javascript" src="/media/js/TableSort.js"></script>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/media/js/core.js"></script>
<script type="text/javascript" src="/media/js/calendar.js"></script>
<script type="text/javascript" src="/media/js/ShowServiceInfo.js"></script>
<script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript">
var os = new ObjSearch();
function Init(){
    os.kw = $('#Search').val().toLowerCase();        
    os.option = $('#serviceType').val();
    os.PageSize = $('#userPageSize').val();
}
Init();os.search();
$("#tb").find("tr:odd").addClass("row1");
$("#Search").bind("input change", function() {
    Init();os.search();
});
$("#serviceType").bind("select change", function() {
    Init();os.search();
});
$("#userPageSize").bind("pageSize change", function() {
    Init();os.search();
    $.get("/cmdb/services/?&pageSize=" + $('#userPageSize').val(), function(data){
                });
});

$("#showDetail").dblclick(function() {
    if ($("#showDetail").is(":visible")==true){
        $("#showDetail").toggle();
    };

});

$(function() { 
	$("#download").click(function(){
		$("#download_div").toggle();
	});
});

$(document).ready( function(){
$('#download_div input:checkbox.usercheck').click(function(){
if (this.checked){
if ($('#download_div input:checked.usercheck').length == $('#download_div input.usercheck').length){
$('#chkAll')[0].checked = true;
}
}else{
$('#chkAll')[0].checked = false;
}
});
});
function select_all(){
var e = $('#chkAll')[0].checked;
$('#download_div input:checkbox.usercheck').each(function(){
this.checked = e;
});
}
</script>

{% endblock %}
